<template>
    <div>
        <el-button class="custom-btn" type="primary" @click="registerExam">我要报名</el-button>
        <el-dialog class="register-dialog fire-exam-dialog" v-model="registerDialogVisible" title="我要报名" width="42%"
            draggable destroy-on-close :before-close="handleClose">
            <div class="dialog-body">
                <div class="list">
                    <div class="item" v-for="item in fireFighterExamList" :key="item.dictCode">
                        <div class="wrap">
                            <img :src="item.src" alt="">
                            <div class="name"> {{ item.dictLabel }}</div>
                            <div class="btns">
                                <el-button type="primary" :disabled="item.dictCode != '1701547840055504898'"
                                    @click="examRegistration(item)">我要报名</el-button>
                                <el-button disabled>考核要求</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handleClose">确定</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog class="register-dialog fire-exam-dialog exam-batch-dialog" v-model="examBatchVisible" title="考试批次"
            width="42%" draggable destroy-on-close :before-close="handleExamBatchClose">
            <div class="dialog-body" v-loading="examBatchLoading">
                <span>考试批次：</span>
                <el-select v-model="batchId" placeholder="请选择考试批次" clearable style="margin-right: 14px;">
                    <el-option v-for="location in examBatchList" :key="location.batchId" :label="location.batchName"
                        :value="location.batchId" />
                </el-select>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :disabled="!batchId" @click="submitBatch">提交</el-button>
                    <el-button @click="examBatchVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <div class="apply-alert" v-show="applyAlertVisible">
            <p>提交成功</p>
            <el-button type="primary" @click="applyAlertVisible = false; examBatchVisible = false">确定</el-button>
        </div>
    </div>
</template>

<script setup>
import { FirefighterExamList } from './data.js'
import { getPostList } from '@/api/exam/post.js'
import { getBatchList } from "@/api/exam/index.js";
import { examRegistrationApprove } from '@/api/exam/registration.js'

const { proxy } = getCurrentInstance()
const parseTime = proxy.parseTime // 格式化时间工具

const props = defineProps({
    userId: {
        type: [Number, String]
    },
})

// 获取考试职位信息
const fireFighterExamList = ref([])
function getPost() {
    getPostList().then(res => {
        fireFighterExamList.value = res.data.map(item => {
            let currentItem = FirefighterExamList.find(post => post.id == item.dictValue)
            return {
                ...item,
                src: currentItem.src
            }
        })
    })
}
getPost()

// 获取考试批次
const batchId = ref(null)
const examBatchList = ref([])
async function getExamBatchList() {
    let res = await getBatchList()
    examBatchList.value = res.data
}
getExamBatchList()

// 我要报名
const registerDialogVisible = ref(false)
function registerExam() {
    registerDialogVisible.value = true
}
function handleClose() {
    registerDialogVisible.value = false
}

function handleExamBatchClose() {
    examBatchVisible.value = false
}

// 打开批次选择弹窗
const examBatchVisible = ref(false)
const examBatchLoading = ref(false)
const registerData = ref({})
function examRegistration(row) {
    try {
        let sendData = {
            applicantId: props.userId,
            applicationTime: parseTime(new Date()),
            postId: row.dictCode,
        }
        registerData.value = sendData

        registerDialogVisible.value = false
        examBatchVisible.value = true

    } catch (e) {
        // 请求失败
        console.error(e.message);
    }
}

const applyAlertVisible = ref(false)

// 确认考试批次后提交
async function submitBatch() {
    if (!batchId) return false
    examBatchLoading.value = true
    try {
        let res = await examRegistrationApprove({ ...registerData.value, batchId: batchId.value })
        if (res.code == 200) {
            applyAlertVisible.value = true
        }
        examBatchLoading.value = false
    } catch (error) {
        examBatchLoading.value = false
    }
}


</script>
<style scoped lang="scss">
::v-deep(.register-dialog) {
    padding: 0;

    .el-dialog__header {
        .el-dialog__title {
            padding-left: 20px;
        }
    }
}

::v-deep(.exam-batch-dialog) {
    padding: 0;

    .dialog-body {
        display: flex;
        align-items: center;
    }
}

.register-dialog {
    padding: 0;

    .dialog-body {
        padding: 23px 31px;

        &>span {
            flex-shrink: 0;
        }

        .list {
            display: flex;

            .item {
                flex: 33.333334% 0 0;
                text-align: center;

                img {
                    width: 132px;
                    height: 132px;
                }

                .name {
                    font-size: 20px;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 11px;
                }

                .btns {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .el-button {
                        width: 154px;
                        height: 32px;
                        margin: 0;

                        &:first-child {
                            background: linear-gradient(180deg, #4780F2 0%, #2B5AA2 100%);

                            &.is-disabled {
                                background: linear-gradient(180deg, lighten(#4780F2, 20%) 0%, lighten(#2B5AA2, 20%) 100%);
                            }
                        }

                        &+.el-button {
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
    }
}

.apply-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 622px;
    background: #DAEEFF;
    border: 1px solid #3C70D1;
    border-radius: 16px;
    text-align: center;
    padding: 44px 0;

    p {
        margin-bottom: 34px;
        font-size: 28px;
        color: #2B5AA2;
    }

    .el-button {
        font-size: 20px;
        width: 275px;
        height: 54px;
    }
}
</style>